<template>
  <div style="width: 100%;height:100%">
    <h1>Zego RTC Video Call</h1>
    <div class="video-wrapper">
        <h4>Remote video</h4>
        <video id="remote-video" autoplay muted playsinline controls></video>
    </div>
  </div>
  
</template>

<script>
import {ZegoExpressEngine} from 'zego-express-engine-webrtc'
import AgoraRTC from "agora-rtc-sdk-ng";

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // data {
  //   zg: null,
  //   localStream: null
  // },
  data() {
    return {
      zg: null,
      localStream: null,
      threeStream: null,
      appID: 406995762,
      server: 'wss://webliveroom406995762-api.imzego.com/ws',
      userID: 'test_' + new Date().getTime(), // userID 用户自己设置，必须保证全局唯一
      userName: this.userID,// userName 用户自己设置，没有唯一性要求
      roomID: "2333", // roomID 用户自己设置，必须保证全局唯一
      effect: true,
      mixerDate: null // 混流地址
    }
  },
  mounted() {
    console.warn('[AgoraRTC]', AgoraRTC)
    this.init();
  },
  methods: {
    init() {
      this.zg = new ZegoExpressEngine(this.appID, this.server);
      this.zg.setDebugVerbose(false);
      window.zg = this.zg;
      this.zg.setSoundLevelDelegate(true, 1000);

      this.zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
          console.warn('[roomStreamUpdate]', roomID, updateType, streamList, extendedData);
          if (updateType == 'ADD') {
              const streamID = streamList[0].streamID;
              this.zg.stopPlayingStream(streamID)
              let remoteStream = await this.zg.startPlayingStream(streamID);
              const remoteVideo = document.getElementById('remote-video');
              remoteVideo.srcObject = remoteStream;
          } else if (updateType == 'DELETE') {
              const streamID = streamList[0].streamID;
              this.zg.stopPlayingStream(streamID)
          }
      });

      this.zg.on("soundLevelUpdate", (soundLevelList)=>{
          console.error("[soundLevelUpdate]",soundLevelList[0]);
      })

      
      // 加入房间
      // fetch(`https://wsliveroom-alpha.zego.im:8282/token?app_id=${this.appID}&id_name=${this.userID}`)
      //     .then(rsp=> rsp.text())
      //     .then(token=> {
      //         this.zg.loginRoom(this.roomID, token, { 
      //           userID: this.userID, userName: this.userName 
      //         }, { userUpdate: true })
      //     });
      // 登录房间 注意！一定要用token 04，否则初始化版权音乐会失败
        fetch('https://sig-liveroom-admin.zego.cloud/thirdToken/get', {
            method: "POST",
            body: JSON.stringify({
                version: '04', 
                appId: this.appID,
                idName: this.userID,
                roomId: this.roomID,
                privilege: {
                    "1": 1,
                    "2": 1
                },
                expire_time: 100000000
            }),
            dataType: "json",
            contentType: "application/json; charset=utf-8"
        }).then(rsp=> rsp.json()).then(res=> {
            console.warn('[token]', res);
            const token = res.data.token
            // 登录
            this.zg.loginRoom(this.roomID, token, { userID: this.userID, userName: this.userName }, { userUpdate: true })
                .then(rsp=> console.warn('[登录 success]', rsp)).catch(err=> console.warn('[登录 fail]', err))
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
